<template>
  <div>
    <el-tag type="info" style="font-size:14px;margin-top:50px">已选宿舍：</el-tag>
    <el-table
      border
      :data="tableData"
      style="width: 100%;margin-top:20px"
      show-overflow-tooltip
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <template v-for="item in tableProp">
        <el-table-column
          v-if="item.prop!=='isFree'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        />
        <!-- 是否空闲 -->
        <el-table-column
          v-if="item.prop ==='isFree'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <template v-if="item.prop==='isFree'">
              <el-tag :type="scope.row.isFree ?'success':'danger'">
                {{ scope.row.isFree?'空闲':'暂无位置' }}
              </el-tag>
            </template>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        prop="handle"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button style="color:red" type="text" @click="checkOut(scope.row)">退房</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getRoomByUser, checkOutRoom } from '@/api/room'

export default {
  name: 'ChoiceDormitory',
  data() {
    return {
      tableData: [],
      tableProp: [
        {
          prop: 'building',
          label: '楼幢'
          // formatter: value => {
          //   return value.dormitory.building
          // }
        },
        {
          prop: 'tablet',
          label: '门牌号'
        }, {
          prop: 'bedNumber',
          label: '床号'
        },
        {
          prop: 'isFree',
          label: '是否空闲'
        }, {
          prop: 'createTime',
          label: '创建时间'
        }, {
          prop: 'updateTime',
          label: '修改时间'
        }
      ]
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    // 数据初始化
    init() {
      getRoomByUser().then((res) => {
        if (res) {
          // this.tableData.push(res)
          this.tableData = res.list
        }
      })
    },
    checkOut(row) {
      checkOutRoom(row.id).then(() => {
        this.$message.success('退房成功')
        // this.$router.go(0)
      })
    }

  }
}
</script>

<style scoped>

</style>
